<script setup lang='ts'>
import { ref, onMounted} from 'vue';
import { getUserServer } from '@/api/user';
import { getMirrorList } from '@/api/mirror';
import { mainUrl } from "@/api/utils";
import { useRouter } from 'vue-router';
import {Plus} from "@element-plus/icons-vue";
const router = useRouter();
const serverList = ref([]);
const mirrorList = ref([]);
onMounted(() => {
  getList()
});
const getList = () => {
  getUserServer().then((res) => {
    serverList.value = res.data.map(item => { return { server_id: item.server_id, name: item.name } });
  }).then(() => {
    serverList.value.forEach(item => {
      getMirrorList(item.server_id).then(res => {
        if (res.data.data.length > 0) {
          res.data.data.forEach(item => {
            mirrorList.value.push(item)
         })
        } 
        console.log('镜像列表', mirrorList.value);
      })
    })
  });
}

</script>

<template>
  <div>
    <div class="pay_body">
      <el-row :gutter="20">
        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" v-for="card in mirrorList">
          <el-card class="pay_card" @click="router.push('/pay/pay')" shadow="hover">
            <img :src="card.image_ico ? mainUrl + card.image_ico:'/images/logoo.jpg.jpg'" class="image" width="200px" style="margin: 0 auto" />
            <div style="padding: 14px;text-align: center;font-size: 15px;">
              {{ card.show_name }}
            </div>
            <div style="display: flex;justify-content: center">
              <el-button class="button" @click="router.push('/pay/pay')">点击购买</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
          <el-card class="pay_card" @click="router.push('/resource/provide')" shadow="hover">
            <img src="/images/jj.png" class="image" width="200px" style="margin: 0 auto" />
            <div style="padding: 14px">
              <span> &nbsp; </span>
            </div>
            <div style="display: flex;justify-content: center">
              <el-button class="button" @click="router.push('/resource/provide')">镜像建议</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>


    </div>
  </div>
</template>

<style lang='scss' scoped>
.pay_body {
  display: flex;
  flex-wrap: wrap;
 
}

.pay_card {
  margin:10px;
  text-align: center
}


</style>
